<template>
  <div class="app-container">
    <div class="table-container">
      <el-table
        ref="roleTable"
        :data="list"
        style="width: 100%"
        v-loading="listLoading"
        border
      >
        <el-table-column label="批次号" align="center" prop="batchId">
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">{{ scope.row.couponName }}</template>
        </el-table-column>
        <el-table-column label="兑换码" align="center">
          <template slot-scope="scope">{{ scope.row.couponCode }}</template>
        </el-table-column>
        <el-table-column label="优惠券号" align="center">
          <template slot-scope="scope">{{ scope.row.couponNumber }}</template>
        </el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">{{
            couponTypes.getValue(scope.row.couponType)
          }}</template>
        </el-table-column>
        <el-table-column label="领取状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status ? 'danger' : 'success'">{{
              scope.row.status ? "已领取" : "待领取"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isDeleted ? 'danger' : 'success'">{{
              scope.row.isDeleted ? "已删除" : "未删除"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template slot-scope="scope">{{
            scope.row.updatedAt | formatDateTime
          }}</template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">{{ scope.row.remark }}</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { formatDate } from "@/utils/date";
import { fetchCouponList } from "@/api/ams";
import { publishStatus, publishStatusEnum } from "../../../utils/constant/pms";
import ModalForm from "@/components/ModalForm.vue";
import { couponTypes } from "@/utils/constant/ams";

//   const defaultListQuery = {
//     pageNum: 1,
//     pageSize: 10,
//     batchName: "",
//   };
const defaultRole = {
  id: null,
  name: null,
  description: null,
  adminCount: 0,
  status: 1,
};
export default {
  name: "roleList",
  components: {
    ModalForm,
  },
  data() {
    return {
      couponTypes,
      list: null,
      total: null,
      listLoading: false,
      dialogVisible: false,
      role: Object.assign({}, defaultRole),
      isEdit: false,
      publishStatus,
      publishStatusEnum,
      metaForm: {},
      userForm: {
        username: "",
        email: "",
      },
      formRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getList();
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  methods: {
    getList() {
      this.listLoading = true;
      fetchCouponList({
        batchId: this.$route.query.id,
      }).then((response) => {
        this.listLoading = false;
        this.list = response.data;
        //   this.total = response.data.total;
      });
    },
  },
};
</script>
<style></style>
